SherbyNet - /page/wikibook/entry.mu

Micron Document

<!DOCTYPE html>

<title>Web Messaging</title>

</head>

<span id="openzim-page-title" class="mw-page-title-main"><span class="mw-page-title-main">Web Messaging</span></span>

</h1>

</header>

/* start https://en.wikipedia.org/ */

.mw-parser-output .hlist dl,.mw-parser-output .hlist ol,.mw-parser-output .hlist ul{margin:0;padding:0}.mw-parser-output .hlist dd,.mw-parser-output .hlist dt,.mw-parser-output .hlist li{margin:0;display:inline}.mw-parser-output .hlist.inline,.mw-parser-output .hlist.inline dl,.mw-parser-output .hlist.inline ol,.mw-parser-output .hlist.inline ul,.mw-parser-output .hlist dl dl,.mw-parser-output .hlist dl ol,.mw-parser-output .hlist dl ul,.mw-parser-output .hlist ol dl,.mw-parser-output .hlist ol ol,.mw-parser-output .hlist ol ul,.mw-parser-output .hlist ul dl,.mw-parser-output .hlist ul ol,.mw-parser-output .hlist ul ul{display:inline}.mw-parser-output .hlist .mw-empty-li{display:none}.mw-parser-output .hlist dt::after{content:": "}.mw-parser-output .hlist dd::after,.mw-parser-output .hlist li::after{content:" · ";font-weight:bold}.mw-parser-output .hlist dd:last-child::after,.mw-parser-output .hlist dt:last-child::after,.mw-parser-output .hlist li:last-child::after{content:none}.mw-parser-output .hlist dd dd:first-child::before,.mw-parser-output .hlist dd dt:first-child::before,.mw-parser-output .hlist dd li:first-child::before,.mw-parser-output .hlist dt dd:first-child::before,.mw-parser-output .hlist dt dt:first-child::before,.mw-parser-output .hlist dt li:first-child::before,.mw-parser-output .hlist li dd:first-child::before,.mw-parser-output .hlist li dt:first-child::before,.mw-parser-output .hlist li li:first-child::before{content:" (";font-weight:normal}.mw-parser-output .hlist dd dd:last-child::after,.mw-parser-output .hlist dd dt:last-child::after,.mw-parser-output .hlist dd li:last-child::after,.mw-parser-output .hlist dt dd:last-child::after,.mw-parser-output .hlist dt dt:last-child::after,.mw-parser-output .hlist dt li:last-child::after,.mw-parser-output .hlist li dd:last-child::after,.mw-parser-output .hlist li dt:last-child::after,.mw-parser-output .hlist li li:last-child::after{content:")";font-weight:normal}.mw-parser-output .hlist ol{counter-reset:listitem}.mw-parser-output .hlist ol>li{counter-increment:listitem}.mw-parser-output .hlist ol>li::before{content:" "counter(listitem)"\a0 "}.mw-parser-output .hlist dd ol>li:first-child::before,.mw-parser-output .hlist dt ol>li:first-child::before,.mw-parser-output .hlist li ol>li:first-child::before{content:" ("counter(listitem)"\a0 "}

/* end https://en.wikipedia.org/ */

</style><style data-mw-deduplicate="TemplateStyles:r1246091330">

/* start https://en.wikipedia.org/ */

.mw-parser-output .sidebar{width:22em;float:right;clear:right;margin:0.5em 0 1em 1em;background:var(--background-color-neutral-subtle,#f8f9fa);border:1px solid var(--border-color-base,#a2a9b1);padding:0.2em;text-align:center;line-height:1.4em;font-size:88%;border-collapse:collapse;display:table}body.skin-minerva .mw-parser-output .sidebar{display:table!important;float:right!important;margin:0.5em 0 1em 1em!important}.mw-parser-output .sidebar-subgroup{width:100%;margin:0;border-spacing:0}.mw-parser-output .sidebar-left{float:left;clear:left;margin:0.5em 1em 1em 0}.mw-parser-output .sidebar-none{float:none;clear:both;margin:0.5em 1em 1em 0}.mw-parser-output .sidebar-outer-title{padding:0 0.4em 0.2em;font-size:125%;line-height:1.2em;font-weight:bold}.mw-parser-output .sidebar-top-image{padding:0.4em}.mw-parser-output .sidebar-top-caption,.mw-parser-output .sidebar-pretitle-with-top-image,.mw-parser-output .sidebar-caption{padding:0.2em 0.4em 0;line-height:1.2em}.mw-parser-output .sidebar-pretitle{padding:0.4em 0.4em 0;line-height:1.2em}.mw-parser-output .sidebar-title,.mw-parser-output .sidebar-title-with-pretitle{padding:0.2em 0.8em;font-size:145%;line-height:1.2em}.mw-parser-output .sidebar-title-with-pretitle{padding:0.1em 0.4em}.mw-parser-output .sidebar-image{padding:0.2em 0.4em 0.4em}.mw-parser-output .sidebar-heading{padding:0.1em 0.4em}.mw-parser-output .sidebar-content{padding:0 0.5em 0.4em}.mw-parser-output .sidebar-content-with-subgroup{padding:0.1em 0.4em 0.2em}.mw-parser-output .sidebar-above,.mw-parser-output .sidebar-below{padding:0.3em 0.8em;font-weight:bold}.mw-parser-output .sidebar-collapse .sidebar-above,.mw-parser-output .sidebar-collapse .sidebar-below{border-top:1px solid #aaa;border-bottom:1px solid #aaa}.mw-parser-output .sidebar-navbar{text-align:right;font-size:115%;padding:0 0.4em 0.4em}.mw-parser-output .sidebar-list-title{padding:0 0.4em;text-align:left;font-weight:bold;line-height:1.6em;font-size:105%}.mw-parser-output .sidebar-list-title-c{padding:0 0.4em;text-align:center;margin:0 3.3em}@media(max-width:640px){body.mediawiki .mw-parser-output .sidebar{width:100%!important;clear:both;float:none!important;margin-left:0!important;margin-right:0!important}}body.skin--responsive .mw-parser-output .sidebar a>img{max-width:none!important}@media screen{html.skin-theme-clientpref-night .mw-parser-output .sidebar:not(.notheme) .sidebar-list-title,html.skin-theme-clientpref-night .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle{background:transparent!important}html.skin-theme-clientpref-night .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle a{color:var(--color-progressive)!important}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .sidebar:not(.notheme) .sidebar-list-title,html.skin-theme-clientpref-os .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle{background:transparent!important}html.skin-theme-clientpref-os .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle a{color:var(--color-progressive)!important}}@media print{body.ns-0 .mw-parser-output .sidebar{display:none!important}}

/* end https://en.wikipedia.org/ */

</style><table class="sidebar nomobile nowraplinks"><tbody><tr><th class="sidebar-title"><a href="HTML" title="HTML">HTML</a></th></tr><tr><td class="sidebar-content hlist">

<ul><li><a href="Dynamic_HTML" title="Dynamic HTML">Dynamic HTML</a></li>

<ul><li><a href="Article_element" title="Article element">article</a></li>

<li><a href="HTML_audio" title="HTML audio">audio</a></li>

<li><a href="Canvas_element" title="Canvas element">canvas</a></li>

<li><a href="HTML_video" title="HTML video">video</a></li></ul></li>

<li><a href="XHTML" title="XHTML">XHTML</a>

<ul><li><a href="XHTML_Basic" title="XHTML Basic">Basic</a></li>

<li><a href="XHTML_Mobile_Profile" title="XHTML Mobile Profile">Mobile Profile</a></li></ul></li>

<li><a href="HTML_element" title="HTML element">HTML element</a>

<li><a href="Blink_element" title="Blink element">blink</a></li>

<li><a href="Marquee_element" title="Marquee element">marquee</a></li></ul></li>

<li><a href="HTML_attribute" title="HTML attribute">HTML attribute</a>

<ul><li><a href="Alt_attribute" title="Alt attribute">alt attribute</a></li></ul></li>

<li><a href="Frame_(World_Wide_Web)" title="Frame (World Wide Web)">HTML frame</a></li>

<li><a href="HTML_editor" title="HTML editor">HTML editor</a></li>

<li><a href="Character_encodings_in_HTML" title="Character encodings in HTML">Character encodings</a>

<ul><li><a href="List_of_XML_and_HTML_character_entity_references" title="List of XML and HTML character entity references">named characters</a></li>

<li><a href="Unicode_and_HTML" title="Unicode and HTML">Unicode</a></li></ul></li>

<li><a href="Language_code" title="Language code">Language code</a></li>

<li><a href="Document_Object_Model" title="Document Object Model">Document Object Model</a></li>

<li><a href="Browser_Object_Model" title="Browser Object Model">Browser Object Model</a></li>

<li><a href="Style_sheet_(web_development)" title="Style sheet (web development)">Style sheets</a>

<li><a href="Font_family_(HTML)" title="Font family (HTML)">Font family</a></li>

<li><a href="Web_colors" title="Web colors">Web colors</a></li>

<li><a href="JavaScript" title="JavaScript">JavaScript</a>

<ul><li><a href="WebCL" title="WebCL">WebCL</a></li>

<ul><li><a href="WebGL" title="WebGL">WebGL</a></li>

<li><a href="WebGPU" title="WebGPU">WebGPU</a></li>

<li><a href="WebXR" title="WebXR">WebXR</a></li></ul></li>

<ul><li><a href="W3C_Markup_Validation_Service" title="W3C Markup Validation Service">Validator</a></li></ul></li>

<li><a href="WHATWG" title="WHATWG">WHATWG</a></li>

<li><a href="Quirks_mode" title="Quirks mode">Quirks mode</a></li>

<li><a href="Web_storage" title="Web storage">Web storage</a></li>

<li><a href="Browser_engine" title="Browser engine">Rendering engine</a></li></ul></td>

</tr><tr><th class="sidebar-heading">

Comparisons</th></tr><tr><td class="sidebar-content hlist">

<ul><li><a href="Comparison_of_document_markup_languages" title="Comparison of document markup languages">Document markup languages</a></li>

<li><a href="Comparison_of_browser_engines" title="Comparison of browser engines">Comparison of browser engines</a></li></ul></td>

</tr><tr><td class="sidebar-navbar" style="border-top:1px solid #aaa;"><style data-mw-deduplicate="TemplateStyles:r1239400231">

/* start https://en.wikipedia.org/ */

.mw-parser-output .navbar{display:inline;font-size:88%;font-weight:normal}.mw-parser-output .navbar-collapse{float:left;text-align:left}.mw-parser-output .navbar-boxtext{word-spacing:0}.mw-parser-output .navbar ul{display:inline-block;white-space:nowrap;line-height:inherit}.mw-parser-output .navbar-brackets::before{margin-right:-0.125em;content:"[ "}.mw-parser-output .navbar-brackets::after{margin-left:-0.125em;content:" ]"}.mw-parser-output .navbar li{word-spacing:-0.125em}.mw-parser-output .navbar a>span,.mw-parser-output .navbar a>abbr{text-decoration:inherit}.mw-parser-output .navbar-mini abbr{font-variant:small-caps;border-bottom:none;text-decoration:none;cursor:inherit}.mw-parser-output .navbar-ct-full{font-size:114%;margin:0 7em}.mw-parser-output .navbar-ct-mini{font-size:114%;margin:0 4em}html.skin-theme-clientpref-night .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}@media(prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}}@media print{.mw-parser-output .navbar{display:none!important}}

/* end https://en.wikipedia.org/ */

</style></td></tr></tbody></table>

<p><b>Web Messaging</b>, or <b>cross-document messaging</b>, is an <a href="API" title="API">API</a> introduced in the <a href="WHATWG" title="WHATWG">WHATWG</a> <a href="HTML5" title="HTML5">HTML5</a> draft specification, allowing documents to communicate with one another across different origins, or source domains<sup id="cite_ref-WHATWG_1-0" class="reference"><a href="#cite_note-WHATWG-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> while rendered in a <a href="Web_browser" title="Web browser">web browser</a>. Prior to HTML5, web browsers disallowed <a href="Cross-site_scripting" title="Cross-site scripting">cross-site scripting</a>, to protect against security attacks. This practice barred communication between non-hostile pages as well, making document interaction of any kind difficult.<sup id="cite_ref-WHATWG_1-1" class="reference"><a href="#cite_note-WHATWG-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-WebKit_2-0" class="reference"><a href="#cite_note-WebKit-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup> Cross-document messaging allows scripts to interact across these boundaries, while providing a rudimentary level of security.

</p>

<div class="mw-heading mw-heading2"><h2 id="Requirements_and_attributes">Requirements and attributes</h2></div>

<p>Using the Messaging API's <code>postMessage</code> method, plain text messages can be sent from one domain to another, e.g. from a parent document to an <a href="IFRAME" class="mw-redirect" title="IFRAME">IFRAME</a>.<sup id="cite_ref-INTRODUCING_3-0" class="reference"><a href="#cite_note-INTRODUCING-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup> This requires that the author first obtain the <code>Window</code> object of the receiving document. As a result, messages can be posted to the following:<sup id="cite_ref-WebKit_2-1" class="reference"><a href="#cite_note-WebKit-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup>

</p>

<ul><li>other frames or iframes within the sender document's window</li>

<li>windows the sender document explicitly opens through JavaScript calls</li>

<li>the parent window of the sender document</li>

<li>the window which opened the sender document</li></ul>

<p>The message <code>event</code> being received has the following attributes:

</p>

<ul><li><code>data</code> – The data, or actual content, of the incoming message.</li>

<li><code>origin</code> – The origin of the sender document. This typically includes the scheme, hostname and port. It does not include the path or fragment identifier.<sup id="cite_ref-WHATWG_1-2" class="reference"><a href="#cite_note-WHATWG-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup></li>

<li><code>source</code> – the <code>WindowProxy</code> of where the document came from (the source window).</li></ul>

<p><code>postMessage</code> is not a blocking call; messages are processed asynchronously.<sup id="cite_ref-4" class="reference"><a href="#cite_note-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup>

</p>

<div class="mw-heading mw-heading2"><h2 id="Example">Example</h2></div>

<p>Consider we want document A loaded from <code>example.net</code> to communicate with document B loaded from <code>example.com</code> into an <code>iframe</code> or popup window.<sup id="cite_ref-WHATWG_1-3" class="reference"><a href="#cite_note-WHATWG-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> The <a href="JavaScript" title="JavaScript">JavaScript</a> for document A will look as follows:

</p>

<div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span class="kd">var</span><span class="w"> </span><span class="nx">o</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'iframe'</span><span class="p">)[</span><span class="mf">0</span><span class="p">];</span>

<span class="nx">o</span><span class="p">.</span><span class="nx">contentWindow</span><span class="p">.</span><span class="nx">postMessage</span><span class="p">(</span><span class="s1">'Hello B'</span><span class="p">,</span><span class="w"> </span><span class="s1">'http://example.com/'</span><span class="p">);</span>

</pre></div>

<p>The origin of our <code>contentWindow</code> object is passed to <code>postMessage</code>. It must match the <code>origin</code> of the document we wish to communicate with (in this case, document B). Otherwise, a security error will be thrown and the script will stop.<sup id="cite_ref-INTRODUCING_3-1" class="reference"><a href="#cite_note-INTRODUCING-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup> The JavaScript for document B will look as follows:

</p>

<div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span class="kd">function</span><span class="w"> </span><span class="nx">receiver</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>

<span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">origin</span><span class="w"> </span><span class="o">==</span><span class="w"> </span><span class="s1">'http://example.net'</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>

<span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">data</span><span class="w"> </span><span class="o">==</span><span class="w"> </span><span class="s1">'Hello B'</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>

<span class="w"> </span><span class="nx">event</span><span class="p">.</span><span class="nx">source</span><span class="p">.</span><span class="nx">postMessage</span><span class="p">(</span><span class="s1">'Hello A, how are you?'</span><span class="p">,</span><span class="w"> </span><span class="nx">event</span><span class="p">.</span><span class="nx">origin</span><span class="p">);</span>

<span class="w"> </span><span class="nx">alert</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">data</span><span class="p">);</span>

<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'message'</span><span class="p">,</span><span class="w"> </span><span class="nx">receiver</span><span class="p">,</span><span class="w"> </span><span class="kc">false</span><span class="p">);</span>

</pre></div>

<p>An <a href="Event_listener" class="mw-redirect" title="Event listener">event listener</a> is set up to receive messages from document A. Using the <code>origin</code> property, it then checks that the domain of the sender is the expected domain. Document B then looks at the message, either displaying it to the user, or responding in turn with a message of its own for document A.<sup id="cite_ref-WHATWG_1-4" class="reference"><a href="#cite_note-WHATWG-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>

</p>

<div class="mw-heading mw-heading2"><h2 id="Security">Security</h2></div>

<p>Poor origin checking can pose a risk for applications which employ cross-document messaging.<sup id="cite_ref-Security_5-0" class="reference"><a href="#cite_note-Security-5"><span class="cite-bracket">[</span>5<span class="cite-bracket">]</span></a></sup> To safeguard against malicious code from foreign domains, authors should check the <code>origin</code> attribute to ensure messages are accepted from domains they expect to receive messages from. The format of incoming data should also be checked that it matches the expected format.<sup id="cite_ref-WHATWG_1-5" class="reference"><a href="#cite_note-WHATWG-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>

</p>

<div class="mw-heading mw-heading2"><h2 id="Support">Support</h2></div>

<p>Support for cross-document messaging exists in current versions of <a href="Internet_Explorer" title="Internet Explorer">Internet Explorer</a>, <a href="Mozilla_Firefox" class="mw-redirect" title="Mozilla Firefox">Mozilla Firefox</a>, <a href="Safari_(web_browser)" title="Safari (web browser)">Safari</a>, <a href="Google_Chrome" title="Google Chrome">Google Chrome</a>, <a href="Opera_(web_browser)" title="Opera (web browser)">Opera</a>, <a href="Opera_Mini" title="Opera Mini">Opera Mini</a>, <a href="Opera_Mobile" title="Opera Mobile">Opera Mobile</a>, and <a href="Android_(operating_system)" title="Android (operating system)">Android web browser</a>.<sup id="cite_ref-canIuse_6-0" class="reference"><a href="#cite_note-canIuse-6"><span class="cite-bracket">[</span>6<span class="cite-bracket">]</span></a></sup> Support for the API exists in the <a href="Trident_(layout_engine)" class="mw-redirect" title="Trident (layout engine)">Trident</a>, <a href="Gecko_(layout_engine)" class="mw-redirect" title="Gecko (layout engine)">Gecko</a>, <a href="WebKit" title="WebKit">WebKit</a> and <a href="Presto_(layout_engine)" class="mw-redirect" title="Presto (layout engine)">Presto</a> layout engines.<sup id="cite_ref-SUPPORT_7-0" class="reference"><a href="#cite_note-SUPPORT-7"><span class="cite-bracket">[</span>7<span class="cite-bracket">]</span></a></sup>

</p>

<ul><li><a href="Cross-site_scripting" title="Cross-site scripting">Cross-site scripting</a></li>

<li><a href="Cross-site_request_forgery" title="Cross-site request forgery">Cross-site request forgery</a></li>

<li><a href="Same-origin_policy" title="Same-origin policy">Same-origin policy</a></li>

<li><a href="Cross-origin_resource_sharing" title="Cross-origin resource sharing">Cross-origin resource sharing</a></li>

<li><a href="JSONP" title="JSONP">JSONP</a></li></ul>

<div class="mw-heading mw-heading2"><h2 id="References">References</h2></div>

/* start https://en.wikipedia.org/ */

.mw-parser-output .reflist{margin-bottom:0.5em;list-style-type:decimal}@media screen{.mw-parser-output .reflist{font-size:90%}}.mw-parser-output .reflist .references{font-size:100%;margin-bottom:0;list-style-type:inherit}.mw-parser-output .reflist-columns-2{column-width:30em}.mw-parser-output .reflist-columns-3{column-width:25em}.mw-parser-output .reflist-columns{margin-top:0.3em}.mw-parser-output .reflist-columns ol{margin-top:0}.mw-parser-output .reflist-columns li{page-break-inside:avoid;break-inside:avoid-column}.mw-parser-output .reflist-upper-alpha{list-style-type:upper-alpha}.mw-parser-output .reflist-upper-roman{list-style-type:upper-roman}.mw-parser-output .reflist-lower-alpha{list-style-type:lower-alpha}.mw-parser-output .reflist-lower-greek{list-style-type:lower-greek}.mw-parser-output .reflist-lower-roman{list-style-type:lower-roman}

/* end https://en.wikipedia.org/ */

</style><div class="reflist reflist-columns references-column-width" style="column-width: 30em;">

<li id="cite_note-WHATWG-1"><span class="mw-cite-backlink">^ <a href="#cite_ref-WHATWG_1-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-WHATWG_1-1"><sup><i><b>b</b></i></sup></a> <a href="#cite_ref-WHATWG_1-2"><sup><i><b>c</b></i></sup></a> <a href="#cite_ref-WHATWG_1-3"><sup><i><b>d</b></i></sup></a> <a href="#cite_ref-WHATWG_1-4"><sup><i><b>e</b></i></sup></a> <a href="#cite_ref-WHATWG_1-5"><sup><i><b>f</b></i></sup></a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html#web-messaging"><i>Cross-Document Messaging – HTML Draft Standard</i></a></span>

</li>

/* start https://en.wikipedia.org/ */

.mw-parser-output cite.citation{font-style:inherit;word-wrap:break-word}.mw-parser-output .citation q{quotes:"\"""\"""'""'"}.mw-parser-output .citation:target{background-color:rgba(0,127,255,0.133)}.mw-parser-output .id-lock-free.id-lock-free a{background:url("./mw/Lock-green.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-limited.id-lock-limited a,.mw-parser-output .id-lock-registration.id-lock-registration a{background:url("./mw/Lock-gray-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-subscription.id-lock-subscription a{background:url("./mw/Lock-red-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .cs1-ws-icon a{background:url("./mw/Wikisource-logo.svg")right 0.1em center/12px no-repeat}body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-free a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-limited a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-registration a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-subscription a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .cs1-ws-icon a{background-size:contain;padding:0 1em 0 0}.mw-parser-output .cs1-code{color:inherit;background:inherit;border:none;padding:inherit}.mw-parser-output .cs1-hidden-error{display:none;color:var(--color-error,#d33)}.mw-parser-output .cs1-visible-error{color:var(--color-error,#d33)}.mw-parser-output .cs1-maint{display:none;color:#085;margin-left:0.3em}.mw-parser-output .cs1-kern-left{padding-left:0.2em}.mw-parser-output .cs1-kern-right{padding-right:0.2em}.mw-parser-output .citation .mw-selflink{font-weight:inherit}@media screen{.mw-parser-output .cs1-format{font-size:95%}html.skin-theme-clientpref-night .mw-parser-output .cs1-maint{color:#18911f}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .cs1-maint{color:#18911f}}

/* end https://en.wikipedia.org/ */

</style><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20120609170929/http://developer.apple.com/library/mac/#documentation/AppleApplications/Conceptual/SafariJSProgTopics/Articles/Cross-documentmessaging.html">"<i>WebKit DOM Programming Topics - Cross Document Messaging</i>"</a>. Archived from <a rel="nofollow" class="external text" href="https://developer.apple.com/library/mac/#documentation/AppleApplications/Conceptual/SafariJSProgTopics/Articles/Cross-documentmessaging.html">the original</a> on 2012-06-09<span class="reference-accessdate">. Retrieved <span class="nowrap">2013-12-29</span></span>.</cite></span>

</li>

<li id="cite_note-INTRODUCING-3"><span class="mw-cite-backlink">^ <a href="#cite_ref-INTRODUCING_3-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-INTRODUCING_3-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text">Remy, Sharp, <i>Messages, Workers, and Sockets</i>, <i>Introducing HTML5</i>, New Riders, 2011, p. 197-199</span>

</li>

<li id="cite_note-4"><span class="mw-cite-backlink"><b><a href="#cite_ref-4">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.w3.org/TR/2010/WD-webmessaging-20101118/#web-messaging">"HTML5 Web Messaging"</a>.</cite></span>

</li>

<li id="cite_note-Security-5"><span class="mw-cite-backlink"><b><a href="#cite_ref-Security_5-0">^</a></b></span> <span class="reference-text"><a rel="nofollow" class="external text" href="http://www.veracode.com/blog/2010/05/html5-security-in-a-nutshell/"><i>HTML5 Security in a Nutshell</i></a></span>

</li>

<li id="cite_note-canIuse-6"><span class="mw-cite-backlink"><b><a href="#cite_ref-canIuse_6-0">^</a></b></span> <span class="reference-text"><a rel="nofollow" class="external text" href="http://caniuse.com/x-doc-messaging"><i>When can I use Cross-Document Messaging?</i></a></span>

</li>

<li id="cite_note-SUPPORT-7"><span class="mw-cite-backlink"><b><a href="#cite_ref-SUPPORT_7-0">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20111112155122/http://molly.com/html5/html5-0709.html">"<i>A Selection of Supported Features in HTML5</i>"</a>. Archived from <a rel="nofollow" class="external text" href="http://molly.com/html5/html5-0709.html">the original</a> on 2011-11-12<span class="reference-accessdate">. Retrieved <span class="nowrap">2011-04-18</span></span>.</cite></span>

</li>

</ol></div>

<div class="mw-heading mw-heading2"><h2 id="External_links">External links</h2></div>

<ul><li><a rel="nofollow" class="external text" href="http://www.w3.org/TR/2015/REC-webmessaging-20150519/">HTML5 Web Messaging recommendation</a></li>

<li><a rel="nofollow" class="external text" href="http://dev.w3.org/html5/postmsg/">HTML5 Web Messaging specification</a> <a rel="nofollow" class="external text" href="https://web.archive.org/web/20101224010913/http://dev.w3.org/html5/postmsg/">Archived</a> 2010-12-24 at the <a href="Wayback_Machine" title="Wayback Machine">Wayback Machine</a></li>

<li><cite class="citation cs2"><a rel="nofollow" class="external text" href="https://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html#web-messaging"><i></i>Cross-Document Messaging – HTML Draft Standard<i></i></a>, <a href="Web_Hypertext_Application_Technology_Working_Group" class="mw-redirect" title="Web Hypertext Application Technology Working Group">WHATWG</a></cite></li>

<li><cite class="citation cs2"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20120609170929/http://developer.apple.com/library/mac/#documentation/AppleApplications/Conceptual/SafariJSProgTopics/Articles/Cross-documentmessaging.html"><i></i>WebKit DOM Programming Topics - Cross Document Messaging<i></i></a>, Apple Developer Library, archived from <a rel="nofollow" class="external text" href="https://developer.apple.com/library/mac/#documentation/AppleApplications/Conceptual/SafariJSProgTopics/Articles/Cross-documentmessaging.html">the original</a> on 2012-06-09<span class="reference-accessdate">, retrieved <span class="nowrap">2013-12-29</span></span></cite></li>

<li><cite id="CITEREFEng2010" class="citation cs2">Eng, Chris (2010-05-17), <a rel="nofollow" class="external text" href="http://www.veracode.com/blog/2010/05/html5-security-in-a-nutshell/"><i></i>HTML5 Security in a Nutshell<i></i></a>, Veracode</cite></li>

<li><cite class="citation cs2"><a rel="nofollow" class="external text" href="http://caniuse.com/x-doc-messaging"><i></i>When can I use Cross-Document Messaging?<i></i></a>, CanIUse</cite></li>

<li><cite class="citation cs2"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20111112155122/http://molly.com/html5/html5-0709.html"><i></i>A Selection of Supported Features in HTML5<i></i></a>, archived from <a rel="nofollow" class="external text" href="http://molly.com/html5/html5-0709.html">the original</a> on 2011-11-12<span class="reference-accessdate">, retrieved <span class="nowrap">2011-04-18</span></span></cite></li></ul>

/* start https://en.wikipedia.org/ */

.mw-parser-output .navbox{box-sizing:border-box;border:1px solid #a2a9b1;width:100%;clear:both;font-size:88%;text-align:center;padding:1px;margin:1em auto 0}.mw-parser-output .navbox .navbox{margin-top:0}.mw-parser-output .navbox+.navbox,.mw-parser-output .navbox+.navbox-styles+.navbox{margin-top:-1px}.mw-parser-output .navbox-inner,.mw-parser-output .navbox-subgroup{width:100%}.mw-parser-output .navbox-group,.mw-parser-output .navbox-title,.mw-parser-output .navbox-abovebelow{padding:0.25em 1em;line-height:1.5em;text-align:center}.mw-parser-output .navbox-group{white-space:nowrap;text-align:right}.mw-parser-output .navbox,.mw-parser-output .navbox-subgroup{background-color:#fdfdfd}.mw-parser-output .navbox-list{line-height:1.5em;border-color:#fdfdfd}.mw-parser-output .navbox-list-with-group{text-align:left;border-left-width:2px;border-left-style:solid}.mw-parser-output tr+tr>.navbox-abovebelow,.mw-parser-output tr+tr>.navbox-group,.mw-parser-output tr+tr>.navbox-image,.mw-parser-output tr+tr>.navbox-list{border-top:2px solid #fdfdfd}.mw-parser-output .navbox-title{background-color:#ccf}.mw-parser-output .navbox-abovebelow,.mw-parser-output .navbox-group,.mw-parser-output .navbox-subgroup .navbox-title{background-color:#ddf}.mw-parser-output .navbox-subgroup .navbox-group,.mw-parser-output .navbox-subgroup .navbox-abovebelow{background-color:#e6e6ff}.mw-parser-output .navbox-even{background-color:#f7f7f7}.mw-parser-output .navbox-odd{background-color:transparent}.mw-parser-output .navbox .hlist td dl,.mw-parser-output .navbox .hlist td ol,.mw-parser-output .navbox .hlist td ul,.mw-parser-output .navbox td.hlist dl,.mw-parser-output .navbox td.hlist ol,.mw-parser-output .navbox td.hlist ul{padding:0.125em 0}.mw-parser-output .navbox .navbar{display:block;font-size:100%}.mw-parser-output .navbox-title .navbar{float:left;text-align:left;margin-right:0.5em}body.skin--responsive .mw-parser-output .navbox-image img{max-width:none!important}@media print{body.ns-0 .mw-parser-output .navbox{display:none!important}}

/* end https://en.wikipedia.org/ */

</style></div><div role="navigation" class="navbox" aria-labelledby="Web_interfaces26" style="padding:3px"><table class="nowraplinks mw-collapsible autocollapse navbox-inner" style="border-spacing:0;background:transparent;color:inherit"><tbody><tr><th scope="col" class="navbox-title" colspan="2"><div id="Web_interfaces26" style="font-size:114%;margin:0 4em"><a href="Web_API" title="Web API">Web interfaces</a></div></th></tr><tr><td colspan="2" class="navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><td class="navbox-abovebelow" colspan="2" style="font-weight:bold"><div id="Server-side154"><a href="Server-side" class="mw-redirect" title="Server-side">Server-side</a></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Communication_protocol" title="Communication protocol">Protocols</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<li><a href="HTTPS" title="HTTPS">Encryption</a></li>

<li><a href="WebDAV" title="WebDAV">WebDAV</a></li></ul></li>

<li><a href="WebSocket" title="WebSocket">WebSocket</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Server_application_programming_interface" title="Server application programming interface">Server APIs</a></th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Netscape_Server_Application_Programming_Interface" title="Netscape Server Application Programming Interface">C NSAPI</a></li>

<li><a href="Apache_HTTP_Server#Feature_overview" title="Apache HTTP Server">C ASAPI</a></li>

<li><a href="Internet_Server_Application_Programming_Interface" title="Internet Server Application Programming Interface">C ISAPI</a></li>

<li><a href="Jakarta_Servlet" title="Jakarta Servlet">Jakarta Servlet</a>

<ul><li><a href="Web_container" title="Web container">container</a></li></ul></li>

<li><a href="HTTP_handler" title="HTTP handler">ASP.NET Handler</a></li>

<li><a href="Web_Server_Gateway_Interface" title="Web Server Gateway Interface">Python WSGI</a></li>

<li><a href="Asynchronous_Server_Gateway_Interface" title="Asynchronous Server Gateway Interface">Python ASGI</a></li>

<li><a href="JSGI" title="JSGI">JavaScript JSGI</a></li>

<li><a href="Java_Portlet_Specification" title="Java Portlet Specification">Portlet</a>

<ul><li><a href="Java_Portlet_Specification" title="Java Portlet Specification">container</a></li></ul></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="List_of_Apache_modules" title="List of Apache modules">Apache modules</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Server_Side_Includes" title="Server Side Includes">mod_include</a></li>

<li><a href="Mod_parrot" class="mw-redirect" title="Mod parrot">mod_parrot</a></li>

<li><a href="Mod_proxy" title="Mod proxy">mod_proxy</a></li>

<li><a href="Mod_python" title="Mod python">mod_python</a></li>

<li><a href="Phusion_Passenger" title="Phusion Passenger">Phusion Passenger</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Topics</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Web_service" title="Web service">Web service</a> vs. <a href="Web_resource" title="Web resource">Web resource</a></li>

<li><a href="Webhook" title="Webhook">Webhook</a></li>

<li><a href="Application_server" title="Application server">Application server</a>

<ul><li><a href="List_of_application_servers" title="List of application servers">comparison</a></li></ul></li>

<li><a href="Server-side_scripting" title="Server-side scripting">Scripting</a></li></ul>

</div></td></tr></tbody></table><div></div></td></tr><tr><td colspan="2" class="navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><td class="navbox-abovebelow" colspan="2" style="font-weight:bold"><div id="Client-side89"><a href="Client-side" class="mw-redirect" title="Client-side">Client-side</a></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Plug-in_(computing)" title="Plug-in (computing)">Browser APIs</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="NPAPI" title="NPAPI">C NPAPI</a>

<ul><li><a href="NPAPI#LiveConnect" title="NPAPI">LiveConnect</a></li>

<li><a href="NPAPI#XPConnect" title="NPAPI">XPConnect</a></li></ul></li>

<li><a href="NPAPI#NPRuntime" title="NPAPI">C NPRuntime</a></li>

<li><a href="Google_Native_Client#Pepper" title="Google Native Client">C PPAPI</a>

<li><a href="ActiveX" title="ActiveX">ActiveX</a></li>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Web_API#Client_side" title="Web API">Web APIs</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="row" class="navbox-group" style="width:1%"><a href="WHATWG" title="WHATWG">WHATWG</a></th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="HTML_audio" title="HTML audio">Audio</a></li>

<li><a href="Canvas_element" title="Canvas element">Canvas</a></li>

<li><a href="HTML_video" title="HTML video">Video</a></li>

<li><a href="WebSocket" title="WebSocket">WebSockets</a></li>

<li><a href="Web_storage" title="Web storage">Web storage</a></li>

<li><a href="Web_worker" title="Web worker">Web worker</a></li>

<li><a href="XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="World_Wide_Web_Consortium" title="World Wide Web Consortium">W3C</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="DOM_event" title="DOM event">DOM events</a></li>

<li><a href="W3C_Geolocation_API" title="W3C Geolocation API">Geolocation</a></li>

<li><a href="Indexed_Database_API" title="Indexed Database API">IndexedDB</a></li>

<li><a href="WebAssembly" title="WebAssembly">WebAssembly</a></li>

<li><a href="WebAuthn" title="WebAuthn">WebAuthn</a></li>

<li><a href="WebGPU" title="WebGPU">WebGPU</a></li>

<li><a href="WebRTC" title="WebRTC">WebRTC</a></li>

<li><a href="WebXR" title="WebXR">WebXR</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Khronos_Group" title="Khronos Group">Khronos</a></th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="WebCL" title="WebCL">WebCL</a></li>

<li><a href="WebGL" title="WebGL">WebGL</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Others</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Gears_(software)" title="Gears (software)">Gears</a></li>

<li><a href="Web_SQL_Database" title="Web SQL Database">Web SQL Database</a> (formerly W3C)</li>

<li><a href="WebUSB" title="WebUSB">WebUSB</a></li></ul>

</div></td></tr></tbody></table><div></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Topics</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Ajax_(programming)" title="Ajax (programming)">Ajax</a> and <a href="Remote_scripting" title="Remote scripting">Remote scripting</a> vs. <a href="Dynamic_HTML" title="Dynamic HTML">DHTML</a></li>

<li><a href="Browser_extension" title="Browser extension">Browser extension</a></li>

<li><a href="Cross-site_scripting" title="Cross-site scripting">Cross-site scripting</a> and <a href="Cross-origin_resource_sharing" title="Cross-origin resource sharing">CORS</a></li>

<li><a href="Hydration_(web_development)" title="Hydration (web development)">Hydration</a></li>

<li><a href="Mashup_(web_application_hybrid)" title="Mashup (web application hybrid)">Mashup</a></li>

<li><a href="Client-side_persistent_data" title="Client-side persistent data">Persistent data</a></li>

<li><a href="Dynamic_web_page#Client-side_scripting" title="Dynamic web page">Scripting</a></li></ul>

<ul><li><a href="Frontend_and_backend" title="Frontend and backend">Frontend and backend</a></li>

<li><a href="Microservices" title="Microservices">Microservices</a>

<li><a href="GraphQL" title="GraphQL">GraphQL</a></li></ul></li>

<li><a href="Push_technology" title="Push technology">Push technology</a></li>

<li><a href="Solution_stack" title="Solution stack">Solution stack</a></li>

<ul><li><a href="Static_web_page" title="Static web page">Static</a></li>

<li><a href="Dynamic_web_page" title="Dynamic web page">Dynamic</a></li></ul></li>

<li><a href="Web_standards" title="Web standards">Web standards</a></li>

<li><a href="Web_API_security" title="Web API security">Web API security</a></li>

<li><a href="Web_application" title="Web application">Web application</a>

<li><a href="Single-page_application" title="Single-page application">Single-page</a></li>

<li><a href="Progressive_web_app" title="Progressive web app">Progressive</a></li></ul></li>

<li><a href="Web_framework" title="Web framework">Web framework</a></li></ul>

</div></td></tr></tbody></table><div></div></td></tr></tbody></table></div></div><div><div class="zim-footer">

This article is issued from <a class="external text" title="Last edited on 2024-11-18" href="https://en.wikipedia.org/wiki/?title=Web_Messaging&oldid=1258250789">Wikipedia</a>. The text is available under <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">Creative Commons Attribution-Share Alike 4.0</a> unless otherwise noted. Additional terms may apply for the media files.

</div>

</div></div>

</div>

</main>

</div>

</body></html>